import React,{useEffect, useState} from "react";
import './WrjOperation.less'
import { Input,Select,Button,Table } from 'antd';
import {ClearOutlined} from '@ant-design/icons';
import type { TableProps } from 'antd';
import moment from 'moment';
import request from "../../../utils/axios";

const Operation:React.FC=()=>{

    const [operationlist,setoOperationList]=useState([])

    //流水号
    const [flowNumber,setFlowNumber]=useState('')
    //操作日志
    const [feature,setFeature]=useState('')
    //IP地址或IP归属地
    const [IPLocaltion,setIPLocaltion]=useState('')
    //操作时间
    const [time,setTime]=useState('')
    //用户名
    const [username,setUserName]=useState('')

    
    const options=[
        { value: '全部', label: '全部' },
        { value: '本月内', label: '本月内' },
        { value: '近三个月', label: '近三个月' },
        { value: '今年内', label: '今年内'},
        { value: '2021年', label: '2021年'},
        { value: '2020年', label: '2020年'},
        { value: '2020年以前', label: '2020年以前'},
    ]

    interface OperationListType  {
        _id: string;
        feature: string;
        operation: string;
        address: string;
        homePlace: string;
        newTime: string;
    }
      
    const columns: TableProps<OperationListType>['columns'] = [
        {
            title: '流水号',
            dataIndex: '_id',
            key: '_id'
        },
        {
            title: '功能模块',
            dataIndex: 'feature',
            key: 'feature',
        },
        {
            title: '操作日志',
            dataIndex: 'operation',
            key: 'operation',
        },
        {
            title: 'IP地址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: 'IP归属地',
            dataIndex: 'homePlace',
            key: 'homePlace',
        },
        {
            title: '操作时间',
            dataIndex: 'newTime',
            key: 'newTime',
            defaultSortOrder: 'descend',
            sorter: (a, b) => moment(a.newTime, 'YYYY-MM-DD HH:mm:ss').unix() - moment(b.newTime, 'YYYY-MM-DD HH:mm:ss').unix(),
            sortDirections: ['descend', 'ascend'],
        }
    ];

    const data = operationlist.map((item:OperationListType)=>{
        return {
            _id:item._id,
            feature:item.feature,
            operation:item.operation+'，登录了系统',
            address: item.address,
            homePlace:item.homePlace,
            newTime:item.newTime.split('T')[0]+' '+item.newTime.split('T')[1].split('.')[0]
        }
    })
    

    const clear=()=>{
        setFlowNumber('');
        setFeature('');
        setIPLocaltion('');
        setTime('');
        setUserName('');
    }

    const getDateStringRange = (optionValue:any) => {
        let startDate, endDate;
        switch (optionValue) {
            case '全部':
                startDate = moment().subtract(5, 'years').format('YYYY-MM-DD');
                endDate = moment().format('YYYY-MM-DD');
                break;
            case '本月内':
                startDate = moment().startOf('month').format('YYYY-MM-DD');
                endDate = moment().endOf('month').format('YYYY-MM-DD');
                break;
            case '近三个月':
                startDate = moment().subtract(3, 'months').format('YYYY-MM-DD');
                endDate = moment().format('YYYY-MM-DD');
                break;
            case '今年内':
                startDate = moment().startOf('year').format('YYYY-MM-DD');
                endDate = moment().endOf('year').format('YYYY-MM-DD');
                break;
            case '2021年':
                startDate = '2021-01-01';
                endDate = '2021-12-31';
                break;
            case '2020年':
                startDate = '2020-01-01';
                endDate = '2020-12-31';
                break;
            case '2020年以前':
                startDate = '2000-01-01'; // 或者更早的日期
                endDate = '2019-12-31';
                break;
            default:
                startDate = '';
                endDate = '';
        }
        return { startDate, endDate };
    };


    const getoperation=async()=>{
        const { startDate, endDate } = getDateStringRange(time);
        let query={
            _id:flowNumber,
            feature:feature,
            address:IPLocaltion,
            homePlace:IPLocaltion,
            newTime:time,
            operation:username
        }
        request.get('getoperation',query).then(error=>{
            console.log(error);
        }).catch(response=>{
            setoOperationList(response.data.operationList);
        })
    }

    useEffect(()=>{
        getoperation()
    },[])

    return (
        <div className="wrj-operation-box">
            <p className="wrj-operation-p">操作日志</p>
            <div className="wrj-operation-search">
                <div className="wrj-operation-search-input">
                    <span>流水编号：</span>
                    <input type="text" placeholder="请输入流水编号" onChange={(e)=>{setFlowNumber(e.target.value)}}/>
                </div>
                <div className="wrj-operation-search-input">
                    <span>关键词：</span>
                    <input type="text" placeholder="请输入日志关键词" onChange={(e)=>{setFeature(e.target.value)}}/>
                </div>
                <div className="wrj-operation-search-input">
                    <span>IP：</span>
                    <input type="text" placeholder="请输入IP地址或归属地" onChange={(e)=>{setIPLocaltion(e.target.value)}}/>
                </div>
                <div className="wrj-operation-search-input">
                    <span>操作时间：</span>
                    <select onChange={(e)=>{setTime(e.target.value)}}>
                        {
                            options.map((item,index)=>{
                                return <option key={index} value={item.value}>{item.value}</option>
                            })
                        }
                    </select>
                </div>
                <div className="wrj-operation-search-input">
                    <span>操作人：</span>
                    <input type="text" placeholder="请输入用户名" onChange={(e)=>{setUserName(e.target.value)}}/>
                </div>
                <Button shape="round" size='middle' className="wrj-operation-search-button" onClick={()=>{getoperation()}}>搜索</Button>
                <p style={{marginTop:'-20px',color:'gray',marginLeft:'20px',cursor:'pointer'}} onClick={clear}><ClearOutlined style={{marginRight:'3px'}}/>清除条件</p>
            </div>
            <Table columns={columns} dataSource={data}/>
        </div>
    )
}

export default Operation